<template>
  <div>
    <div id="container"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    // 挂载完毕就可以使用浏览器的东西
    window.onLoad = function () {
      var map = new AMap.Map("container", {
        zoom: 6,
        center: [113.32, 23.12],
        viewMode: "3D",
      });

      let marker = [];
      // 定义酒店位置
      let hotelList = [
        { east: 113.32, northern: 23.12 },
        { east: 112, northern: 24 },
        { east: 111, northern: 22 },
      ];

      hotelList.forEach((element) => {
        marker.push(
          new AMap.Marker({
            position: [element.east, element.northern],
            // offset: new AMap.Pixel(-100, -100),
            // icon: "//vdata.amap.com/icons/b18/1/2.png",
            // content: "<h1>哈哈哈</h1>",
          })
        );
      });
      // var marker = new AMap.Marker({
      //   position: [113.32, 23.1],
      //   // offset: new AMap.Pixel(-100, -100),
      //   // icon: "//vdata.amap.com/icons/b18/1/2.png",
      //   // content: "<h1>哈哈哈</h1>",
      // });
      map.add(marker);

      AMap.plugin("AMap.ToolBar", function () {
        var toolbar = new AMap.ToolBar();
        map.addControl(toolbar);
      });
    };

    var url =
      "https://webapi.amap.com/maps?v=1.4.15&key=2f8f1ab47f5f80d384d6543fe6658a6a&callback=onLoad";
    var jsapi = document.createElement("script");
    jsapi.charset = "utf-8";
    jsapi.src = url;
    document.head.appendChild(jsapi);
  },
};
</script>

<style lang="less" scoped>
#container {
  width: 500px;
  height: 300px;
}
</style>
